<template>
  <div id="jsmind_container">
    <vue2-org-tree :data="data" :horizontal="true" :label-class-name="labelClassName"
      :props="{ label: 'label', children: 'children', expand: 'expand' }" :collapsable="true" @on-expand="onExpand"
      @on-node-click="NodeClick" @on-node-mouseover="onMouseover" @on-node-mouseout="onMouseout"
      :renderContent="renderContent" />
    <!-- <vue2-org-tree :data="data" :label-class-name="labelClassName" collapsable @on-expand="onExpand"
      @on-node-click="NodeClick" @on-node-mouseover="onMouseover" @on-node-mouseout="onMouseout"
      :renderContent="renderContent" /> -->
    <!-- 创建浮窗盒子 -->
    <!-- <div v-show="basicSwitch" class="floating"> -->
      <!-- <p>ID:{{ basicInfo.id }}</p>
      <p>Name:{{ basicInfo.label }}</p> -->
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelClassName: "bg-color-orange",
      basicInfo: { id: null, label: null },
      basicSwitch: false,
      data: {
        id: 0,
        label: "旅",
        children: [
          {
            id: 2,
            label: "一营",
            children: [
              {
                id: 5,
                label: "一连",
                children: [
                  {
                    id: 55,
                    label: "一排"
                  },
                  {
                    id: 56,
                    label: "二排"
                  },
                  {
                    id: 57,
                    label: "三排"
                  },
                ]
              },
              {
                id: 6,
                label: "二连",
                children: [
                  {
                    id: 550,
                    label: "一排"
                  },
                  {
                    id: 561,
                    label: "二排"
                  },
                  {
                    id: 572,
                    label: "三排"
                  },
                ]
              },
            ]
          },
        ]
      },
    }
  },
  mounted() {
    this.toggleExpand(this.data, true);
  },
  methods: {
    clickAddNode(data) {
      console.log(data);
    },
    // 默认展开
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    },
    //渲染节点
    renderContent(h, data) {
      return (
        <div>
          <div>
            <i class="el-icon-user-solid1"></i>
            <span>{data.label}</span>
            <i class="plusNode el-icon-plus"
              id={`add_${data.id}`}  // 使用模板字符串动态设置ID
              onClick={(e) => {e.stopPropagation();this.clickAddNode(data);}}
              style={{
              marginLeft: '10px',
              /* color: this.basicSwitch && this.basicInfo.id === data.id ? '#409EFF' : '#666',
              display: this.basicSwitch && this.basicInfo.id === data.id ? 'inline-block' : 'none' */
              }}
            ></i>
          </div>
        </div>
      );
    },
    //鼠标移出
    onMouseout(e, data) {
      this.basicSwitch = false;
    },
    //鼠标移入
    onMouseover(e, data) {
      this.basicInfo = data;
      this.basicSwitch = true;
      // var floating = document.getElementsByClassName("floating")[0];
      // floating.style.left = e.clientX + "px";
      // floating.style.top = e.clientY + "px";
    },
    //点击节点
    NodeClick(e, data) {
      console.log(e, data);
    },
    //默认展开
    toggleExpand(data, val) {
      if (Array.isArray(data)) {
        data.forEach(item => {
          this.$set(item, "expand", val);
          if (item.children) {
            this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          this.toggleExpand(data.children, val);
        }
      }
    },
    collapse(list) {
      list.forEach(child => {
        if (child.expand) {
          child.expand = false;
        }
        child.children && this.collapse(child.children);
      });
    },
    //展开
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
  }

};

</script>
<style>
.plusNode {
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
#jsmind_container {
  width: 100%;
  // height: 500px;
}

::v-deep .org-tree-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: transparent;
}

::v-deep .horizontal .org-tree-node:not(:only-child):after {
  border-top: 2px solid #000000;
}

::v-deep .horizontal .org-tree-node:not(:first-child):before,
::v-deep .horizontal .org-tree-node:not(:last-child):after {
  border-left: 2px solid #000000;
}

::v-deep .horizontal .org-tree-node-children:before {
  border-top: 2px solid #000000;
}

::v-deep .org-tree-node-label .org-tree-node-label-inner {
  padding: 5px 10px;
  background-color: aliceblue;
}

.org-tree-node-label-inner {
  color: #fff;
  background-color: orange;
}

.floating {
  background: rgba(0, 0, 0, 0.7);
  width: 160px;
  height: 100px;
  position: absolute;
  color: #fff;
  padding-top: 15px;
  border-radius: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  left: 0;
  top: 0;
  transition: all 0.3s;
  z-index: 999;
  text-align: left;
  font-size: 12px;
}
</style>
